<!DOCTYPE html>
<html>
<head>
    <title>Módulo 4</title>
    <meta charset="utf-8">
    <style type="text/css">
        td.botonesCarateres {
            font-family: Monotxt;
            border-color: black;
            border: solid 1px;
            text-align:center;
            height: 50px;
            width: 50px;
            margin: 10px;
            cursor: pointer;            
            font-size: 18px;
            font-weight: bold;
        }

        td.botonesOperaciones {
            font-family: Serif;
            background-color: LightSteelBlue;
            border-color: black;
            border: solid 1px;
            text-align:center;
            height: 50px;
            width: 50px;
            margin: 10px;
            cursor: pointer;            
            font-size: 16px;
            font-weight: bold;
        }

        input.cajaTexto {
            width: 96%;
            margin: 3px;
            color: lime;
            background-color: black;
            text-align: right;
            font-family: Monotxt;
            font-size: 18px;
            font-weight: bold;
        }
    </style>
    <script type="text/javascript">
        var numero1 = 0;
        var numero2 = 0;
        var operacion;

        function pintar(numero) 
        {
        	if(document.getElementById("txtNumero").value.toString ()=== '-' )
        	{
        	 	numero1 = '-' + numero
        	}
        	else{
	            if(document.getElementById("txtNumero").value === "0" || numero1 === 0){
	                numero1 = numero;
	            }else{
	                numero1 += numero;
	            }
	        }
                document.getElementById("txtNumero").value = numero1.toString( );
        }
        
        //Esta funcion se llama cada vez que se presiona un boton de operacion.
        function operar(valor){
        	    if(valor === '-' && document.getElementById("txtNumero").value.toString( ) === '0' )
            	{
            		document.getElementById("txtNumero").value = '-';
            	}
            	else
            		{
			            numero2 = parseInt(numero1);
			            numero1= 0;
			            operacion = valor;
			
			            if( 
			            	( valor === 'cuadrado' ) || 
			            	( valor === 'inverso' )  || 
			            	( valor === 'raiz' )     || 
			            	( valor === 'parteEntera' ) 
			              )
			            {
			                total( );
			            }
			        }
        }

        function reset( )
        {
            numero1 = 0;
            numero2 = 0;
            document.getElementById("txtNumero").value = 0;
        }

        function total( ) 
        {
            numero1 = parseInt(numero1);

            switch (operacion)
            {
                case '+':
                    numero1 += numero2;
                    break;
                case '-':
                    numero1 = numero2 - numero1;
                    break;
                case '*':
                    numero1 *= numero2;
                    break;
                case '/':
                    numero1 = numero2 / numero1;
                    break;
                case 'cuadrado'://cuadrado
                    numero1 = numero2*numero2;
                    break;
                case 'inverso'://cuadrado
                    numero1 = 1 / numero2;
                    break;
                case 'raiz'://raiz cuadrada
                    numero1 =   Math.sqrt( numero2 );
                    break;            
                case 'parteEntera':
                	if( numero2 > 0 )
                	{
                		numero1 = Math.floor(numero2); 
                	}else
                		{  
                			numero1 =   -Math.ceil( numero2 );
                		}
                    break;
                case 'exponenciacion':
                    numero1 =   Math.pow( numero2 ,numero1 );
                    break;            
                    
                }
            document.getElementById("txtNumero").value = numero1;
            numero2 = parseInt(numero1);
        }
         //Styles
        function OnOverBG(element, color) 
        {
            element.style.backgroundColor = color;
        }

        function OnOutBG(element, color) 
        {
            element.style.backgroundColor = color;
        }

        function onOverColor(element, color) 
        {
            element.style.Color = color;
        }

        function OnOutColor(element, color) 
        {
            element.style.Color = color;
        }

    </script>
</head>
<body>
    <br />
    <h1>Buenos días, bienvenido a la calculadora de Carlos Cobo.</h1>
    <br />
    <table style="width: 100%; height: 100%; border-color: black">
        <tr>
            <td align="center" valign="middle">
                <table style="border-color: black; border: solid 1px; width: 300px; background-color: gainsboro; border-spacing: 2px; padding: 2px">
                    <tr>
                        <td>
                            <input class="cajaTexto" type="text" maxlength="20" id="txtNumero" value="0">                            
                        </td>
                    </tr>
                    <tr>
                        <td width="100%" valign="middle" align="center">
                            <table style="font: normal 20px Arial; color: black; border: 1px; width: 100%;">
                                <tr>
                                    <td>
                                        <table style="font: normal 20px Arial; color: black; border: 1px; width: 100%;">
                                            <tr>
                                                <td class="botonesCarateres" onclick="pintar('7')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'gainsboro')" value="7">7</td>
                                                <td class="botonesCarateres" onclick="pintar('8')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'gainsboro')" value="8">8</td>
                                                <td class="botonesCarateres" onclick="pintar('9')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'gainsboro')" value="9">9</td>
                                                <td class="botonesOperaciones" onclick="operar('/')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'LightSteelBlue')">/</td>
                                            </tr>
                                            <tr>
                                                <td class="botonesCarateres" onclick="pintar('4')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'gainsboro')" value="4">4</td>
                                                <td class="botonesCarateres" onclick="pintar('5')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'gainsboro')" value="5">5</td>
                                                <td class="botonesCarateres" onclick="pintar('6')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'gainsboro')" value="6">6</td>
                                                <td class="botonesOperaciones" onclick="operar('*')"onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'LightSteelBlue')">*</td>
                                            </tr>
                                            <tr>
                                                <td class="botonesCarateres" onclick="pintar('1')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'gainsboro')" >1</td>
                                                <td class="botonesCarateres" onclick="pintar('2')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'gainsboro')" >2</td>
                                                <td class="botonesCarateres" onclick="pintar('3')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'gainsboro')" >3</td>
                                                <td class="botonesOperaciones" onclick="operar('-')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'LightSteelBlue')" >-</td>
                                            </tr>
                                            <tr>
                                                <td class="botonesCarateres" colspan="2" onclick="pintar('0')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'gainsboro')">0</td>
                                                <td class="botonesOperaciones" onclick="pintar('.')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'LightSteelBlue')">.</td>
                                                <td class="botonesOperaciones" onclick="operar('+' )" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'LightSteelBlue')" value="+" >+</td>
                                            </tr>
                                            <tr>
                                                <td class="botonesOperaciones" colspan="5"  onclick="total( )" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'Salmon')" value="=" style="background-color: Salmon">=</td>
                                            </tr>                                            
                                            <tr>
                                                <td class="botonesOperaciones" onclick="operar('cuadrado')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'LightSteelBlue')">x<sup>2</sup></td>
                                                <td class="botonesOperaciones" onclick="operar('inverso')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'LightSteelBlue')">1/x</td>
                                                <td class="botonesOperaciones" onclick="operar('raiz')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this,'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'LightSteelBlue')">Raiz</td>
                                                <td class="botonesOperaciones" onclick="reset( )" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'LightSteelBlue')">C</td>                                             
                                            </tr>
                                            <tr>
                                                <td class="botonesOperaciones" onclick="operar('parteEntera')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'LightSteelBlue')">Parte entera</td>
                                                <td class="botonesOperaciones" onclick="operar('exponenciacion')" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'LightSteelBlue')"> x^y</td>
                                                <td class="botonesOperaciones" onclick="" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'LightSteelBlue')"></td>
                                                <td class="botonesOperaciones" onclick="" onmouseover="onOverColor(this, 'lime'); OnOverBG(this, 'white')" onmouseout="OnOutColor(this, 'Black'); OnOutBG(this, 'LightSteelBlue')"></td>
                                            </tr>

</table> </td>                             </tr>
</table>                         </td> </tr>                 </table>
</td>         </tr>     </table>  </body> </html>